<template>
  <div class="bottom">
      <div class="up">
          <ul>
              <li>
                  <span class="bg1">优鲜保障</span>
              </li>
              <li>
                  <span class="bg2">全程监控</span>
              </li>
              <li>
                  <span class="bg3">礼拜五特惠</span>
              </li>
              <li>
                  <span class="bg4">基地直供</span>
              </li>
              <li>
                  <span class="bg5">准时送达</span>
              </li>
          </ul>
      </div>
      <div class="nav">
          <div class="left">
              <img src="./logo.jpg" alt="">
              <p>服务时间：08:00-22:00<span>400-800-8820</span></p>
          </div>
          <div class="tu">
              <div>
                <img src="./ewm1.jpg" alt="">
                <p>礼拜五官方微信</p> 
              </div>
              <div>
                <img src="./ewm2.jpg" alt="">
                <p>礼拜五APP</p> 
              </div>
          </div>
          <div class="right">
              <ul>
                  <li>
                      <p>关于礼拜五</p>
                      <span>新用户注册</span>
                      <span>在线下单</span>
                      <span>支付方式</span>
                  </li>
                  <li>
                      <p>配送说明</p>
                      <span>运费说明</span>
                      <span>配送方式</span>
                      <span>发票说明</span>
                  </li>
                  <li>
                      <p>售后服务</p>
                      <span>退换货说明</span>
                      <span>服务保障承诺</span>
                      <span>验货与签收</span>
                  </li>
                  <li>
                      <p>加盟礼拜五</p>
                      <span>加盟条款</span>
                      <span>公司简历</span>
                      <span>服务协议</span>
                  </li>
              </ul>
          </div>
      </div>
      <div class="bottom">
          <h3>版权所有 © 礼拜五  保留所有权利 | 沪ICP备12042163</h3>
          <p>礼拜五  纵享品质</p>
      </div>
  </div>
</template>

<script>
 import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
 import 'swiper/css/swiper.css'

export default {
    name: 'Sycontent',
    title: 'Multiple slides per view',
    components: {
      Swiper,
      SwiperSlide
    },
}
</script>

<style scoped>
.up{
    margin-top: 40px;
    height: 106px;
    border-top: 1px #dddddd solid;
    border-bottom: 1px #dddddd solid;
    
}
.up ul{
    width: 1280px;
    display: flex;
    margin: 0 auto;
    text-align: center;
    margin-top: 23px;
}
.up ul li{
    color: #333333;
    font-size: 24px;
    width: 255px;
    height: 60px;
    margin: 0 auto;
    line-height: 60px;
}
.bg1{
    display: block;
    background: url(./ul1.png) no-repeat 20px 50%;
    border-right: 1px #dddddd solid;
    width: 255px;
}
.bg2{
    display: block;
    background: url(./ul2.png) no-repeat 20px 50%;
    border-right: 1px #dddddd solid;
    width: 255px;
}
.bg3{
    display: block;
    background: url(./ul3.png) no-repeat 20px 50%;
    border-right: 1px #dddddd solid;
    width: 255px;
}
.bg4{
    display: block;
    background: url(./ul4.png) no-repeat 20px 50%;
    border-right: 1px #dddddd solid;
    width: 255px;
}
.bg5{
    display: block;
    background: url(./ul5.png) no-repeat 20px 50%;
    width: 255px;
}
.nav{
    width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    height: 200px;
    border-bottom: 1px #dddddd solid;
}
.left{
    margin-top: 30px;
}
.left p{
    margin-top: 40px;
    font-size: 18px;
    color: #666;
}
.left p span{
    background: url(./sj.jpg) no-repeat 0 50%;
    padding-left: 25px;
    font-size: 18px;
    color: #f08200;
    margin-left: 20px;
}
.tu{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    width: 310px;
}
.tu div>p{
    text-align: center;
    font-size: 16px;
    color: #666;
}
.right ul{
    margin-top: 30px;
    display: flex;
    width: 500px;
}
.right ul li{
    width: 125px;
}
.right ul li p{
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
}
.right ul li span{
    display: block;
    font-size: 14px;
    color: #999;
    line-height: 28px;
    cursor: pointer;
}
.bottom{
    text-align: center;
    height: 83px;
}
.bottom h3{
    padding-top: 20px;
    font-size: 14px;
    font-weight: 100;
    color: #666;
}
.bottom p{
    color: #f08200;
    font-size: 14px;
}
</style>